<template>
    <!--聊天窗口-->
    <div class="main">
        <div v-show="ifChatBox" class="contentBox">
            <div class="titleBOX">
                <div class="title">
                    <p v-html="toUser.userName"></p>
                </div>

                <div class="tool">
                    <div class='startFirst' @click='starMark' v-if='starCurrent'>
                        <i></i>
                        <span>星标</span>
                    </div>
                    <div class='startSecoud' v-if='!starCurrent' @click='CancelStarMark'>
                        <i></i>
                        <span>已标记</span>
                    </div>
                    <div class='pullBlackSecoud' v-if='!Visiblehandle' @click='CancelVible'>
                        <i></i>
                        <span>已拉黑</span>
                    </div>

                    <div class='pullBlackFirst' @click="handleCloseTrue" v-if='Visiblehandle'>
                        <i></i>
                        <span>拉黑</span>
                    </div>
                    <div class='Establish' @click='openCreateWork'>
                        <i></i>
                        <span>创建工单</span>
                    </div>
                    <div class='Transfer' @click='openTranfer' v-if='Transfer'>
                        <i></i>
                        <span>转接</span>
                    </div>
                </div>
            </div>


            <!--聊天内容-->
            <div class="mainBOX" ref="mainBox" @click='closeEmoji'>
                <ul id="mainBOX">
                    <li :class="item.mine ? 'mind' : 'your'" v-for="(item,index) in userMessages[toUser.userId]"
                        :data-time="userMessages.timestamp" :key='index'>

                        <p v-if="item.type.value!=='event'">{{item.timestamp}}</p>
                        <p  v-if="item.type.value === 'event'" class='status'>{{item.content}}</p>
                        <div class="user" v-if="item.type.value!=='event'" >
                            <img :src='item.mine ? myLogo : toUser.userLogo' alt="">
                            <cite>
                                <!-- <span>{{item.timestamp}}</span> -->
                                <span :key='index'>{{item.fromUser.name}}</span>
                            </cite>
                        </div>
                        <div class="text" v-if="item.type.value!=='event'" >
                            <p v-if="item.type.value === 'txt' || item.type.value === 'chat'"  v-html="emoji(item.content)"></p>
                            <img v-image-preview v-if="item.type.value === 'image'" :src="item.content" alt="">
                            <video v-if="item.type.value === 'video'" :src="item.content" controls="controls"></video>
                            <audio v-if="item.type.value === 'audio'" :src="item.content" controls="controls"></audio>
                            <a v-if="item.type.value === 'location'" :href="locationURL" target="_blank">
                                <img :src="imgUrl" alt="">
                            </a>

                        </div>
                    </li>
                </ul>
            </div>
            <div class="inputBox" :class="{'inputBoxBg':transferValue === 'history'}">
              <ul class='auxiliary' v-if='auxiliary'>
                <li v-for='(item,index) in recodeList' @click='chooseRecode(item)' :key='index' >
                    {{item}}
                </li>
              </ul>
                <div class="components-container">
                    <div class="editor-container">
                        <div class="toolbar">
                            <i class="icon-face" @click="ifEmoji = !ifEmoji"></i>
                            <i class='icon-photo'>
                                <input id='file' type="file" @change="updatePhoto" accept="image/*">
                            </i>
                            <i class='icon-video'>
                                <input id='video' type="file" @change="updateVideo" accept="video/*">
                            </i>
                            <i class='icon-audio'>
                                <input id='audio' type="file" @change="updateAudio" accept="audio/*">
                            </i>

                            <div class='bgDisable' v-if="transferValue === 'history'"></div>
                        </div>


                        <div class="emoji-box" v-if="ifEmoji">

                            <vue-emoji
                                    :toUser='toUser'
                                    @select="selectEmoji">
                            </vue-emoji>
                            <span class="pop-arrow arrow"></span>
                        </div>
                        <el-input
                                id='textarea'
                                type="textarea"
                                :autosize="{ minRows: 5, maxRows: 10}"
                                @keyup.enter.native="sendMessage"
                                :disabled="transferValue === 'history'"
                                placeholder="请输入内容"
                                resize="none"
                                autofocus=true
                                wrap="soft"
                                v-model="value">
                        </el-input>

                    </div>
                </div>

                <div class="charBtn">
                    <div class="btnBOX">
                        <el-button @click="sendMessage()" :disabled="transferValue === 'history'" size="mini" split-button type="primary">发送</el-button>
                    </div>
                </div>
            </div>
        </div>

        <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="30%"
                :before-close="handleClose">
            <span>确定要拉黑这个客户吗？</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleCloseTrue">确 定</el-button>
            </span>
        </el-dialog>

        <transfer ref='transfer'></transfer>
        <createWork ref='createWork' :toUser='toUser'></createWork>
    </div>


</template>

<script>
import chat from "../../libs/chat";
import userInfor from "../../libs/userInfor";
import keyword from "../../libs/keyword";
import { Loading } from "element-ui";
import vueEmoji from "../emoji.vue";
import EasyUpload from "../../libs/EasyUpload";
import contentQ from "../contentQ";
import transfer from "./Transfer"; //转接
import createWork from "./createWork"; //创建工单
import VueDirectiveImagePreviewer from "vue-directive-image-previewer/dist";
import imagePreviewer from "vue-directive-image-previewer/src/imagePreviewer.vue";

export default {
  name: "content-box",

  data() {
    return {
      txtContent: true,
      imageContent: false,
      videoContent: false,
      audioContent: false,
      starCurrent: true,
      dialogVisible: false,
      Visiblehandle: true,
      toUser: {
        userId: "robot",
        userName: "robot",
        userLogo: "https://img.sobot.com/console/common/face/admin.png"
      },
      value: "",
      ifEmoji: false,
      myLogo: "",
      ifChatBox: false,
      if: false,
      historyLoaded: {},
      //聊天的信息
      userMessages: {},
      Transfer: false,
      transferValue: "",
      lat: "",
      lng: "",
      locationURL: "",
      imgUrl: "",
      page: "1",
      limit: "20",
      recodeList: "",
      auxiliary: false,
      recodeListStatus: false,
      contentKeyword: ""
    };
  },

  props: ["defaultMsg"],
  methods: {
    valueSearch() {
      let auxiliary = localStorage.getItem("auxiliary");
      if (auxiliary === "1") {
        if (this.value) {
          if (!this.recodeListStatus) {
            chat.knowledges(this.value, this.page, this.limit, res => {
              if (res.data.recordList.length !== 0) {
                let jsonData = res.data.recordList,
                  dataArr = [];
                this.auxiliary = true;
                for (let i = 0; i < jsonData.length; i++) {
                  dataArr.push(jsonData[i].content);
                }
                this.recodeList = dataArr;
              } else {
                this.auxiliary = false;
              }
            });
          }
        } else {
          this.auxiliary = false;
        }
      }

      this.hasIsthere();
    },

    //关键字
    handleKeyword() {
      keyword.getKeyWord(res => {
        if (res.code === 200) {
              this.contentKeyword = res.data;
        } else {
          this.$message({
            type: "error",
            message: res.error
          });
        }
      });
    },

    //检索输入的值中是否有关键字
    hasIsthere() {
      if (this.value !== "" && this.contentKeyword.length > 0) {
        let a = this.contentKeyword.join('|');
        let reg = new RegExp(a);
        if(reg.test(this.value)){
            this.$message({
              message: `您输入的内容含有非法内容,请文明聊天`,
              type: "warning"
            });
        }else{
            return true;
        }
      }else{
        return true;
      }
    },

    chooseRecode(value) {
      this.value = value;
      this.recodeListStatus = !this.recodeListStatus;
      console.log(this.recodeListStatus);
      this.auxiliary = false;
    },
    closeEmoji() {
      this.ifEmoji = false;
    },

    handleClose(done) {
      this.dialogVisible = false;
    },
    //是否要拉黑
    handleCloseTrue() {
      let _self = this;
      let nickname = this.toUser.userName;
      let newId = this.toUser.userId.toString().substring(2);
      let current = 1; //设置已拉黑
      userInfor.getblocked(newId, current, nickname, function(res) {
        console.log(res);
        if (res.code === 200) {
          _self.Visiblehandle = false;
        } else {
          _self.$message.error(res.error);
        }
      });
    },

    //取消拉黑
    CancelVible() {
      let _self = this;
      let nickname = this.toUser.userName;
      let newId = this.toUser.userId.toString().substring(2);
      let current = 0; //设置取消拉黑
      userInfor.getblocked(newId, current, nickname, function(res) {
        console.log(res);
        if (res.code === 200) {
          _self.Visiblehandle = true;
        } else {
          _self.$message.error(res.error);
        }
      });
    },

    //请求当前用户信息
    setUserStatus(res) {
      if (res.data.redis.marked) {
        this.starCurrent = parseInt(res.data.redis.marked) === 0;
      }
      if (res.data.redis.blocked) {
        this.Visiblehandle = parseInt(res.data.redis.blocked) === 0;
      }
      if (!res.data.redis.marked || !res.data.redis.blocked) {
        this.starCurrent = true;
        this.Visiblehandle = true;
      }
    },

    //星标
    starMark() {
      let _self = this,
        id = this.toUser.userId;
      let nickname = this.toUser.userName;
      let newId = id.toString().substring(2);

      let current = 1; //设置已标记
      userInfor.getStar(newId, current, nickname, function(res) {
        if (res.code === 200) {
          _self.starCurrent = false;
        } else {
          _self.$message.error(res.error);
        }
      });
    },

    //取消标记
    CancelStarMark() {
      let nickname = this.toUser.userName;
      let _self = this,
        id = this.toUser.userId;
      let newId = id.toString().substring(2);
      let current = 0; //设置取消标记
      userInfor.getStar(newId, current, nickname, function(res) {
        //  console.log(res);
        if (res.code === 200) {
          _self.starCurrent = true;
        } else {
          _self.$message.error(res.error);
        }
      });
    },

    //创建工单
    openCreateWork() {
      this.$refs.createWork.openCreate(this.toUser);
    },

    //转接
    openTranfer() {
      this.$refs.transfer.openranferBox(this.toUser);
    },

    updatePhoto() {
      //上传图片
      let _self = this;
      EasyUpload.init(
        process.env.API_URL + "/home/upload/add",
        {},
        "file",
        "file",
        function(data) {
          let imgPath = data.data;
          let msg = chat.messageConvert({
            cvaId: _self.toUser.cvaId,
            from: chat.my().userId,
            fromUser: {
              name: chat.my().userName
            },
            type: {
              value: "image"
            },
            to: _self.toUser.userId,
            content: imgPath,
            timestamp: Math.round(new Date().getTime() / 1000).toString()
          });
          _self.imageContent = true;
          _self.txtContent = false;
          console.log(_self.toUser.cvaId);
          chat.sendMessage(
            imgPath,
            _self.toUser.userId,
            "image",
            "none",
            _self.toUser.cvaId
          );
          _self.addMessage(msg, false);
        },
        function(e) {
          console.log(e);
        }
      );

      EasyUpload.upload();
    },
    updateVideo() {
      //上传视频
      let _self = this;
      EasyUpload.init(
        process.env.API_URL + "/home/upload/add",
        {},
        "file",
        "video",
        function(data) {
          console.log(data);
          let imgPath = data.data;
          let msg = chat.messageConvert({
            cvaId: _self.toUser.cvaId,
            from: chat.my().userId,
            fromUser: {
              name: chat.my().userName
            },
            type: {
              value: "video"
            },
            to: _self.toUser.userId,
            content: imgPath,
            timestamp: Math.round(new Date().getTime() / 1000).toString()
          });
          chat.sendMessage(
            imgPath,
            _self.toUser.userId,
            "video",
            "none",
            _self.toUser.cvaId
          );
          _self.addMessage(msg, false);
        },
        function(e) {
          console.log(e);
        }
      );

      EasyUpload.upload();
    },

    updateAudio() {
      //上传音频
      let _self = this;
      EasyUpload.init(
        process.env.API_URL + "/home/upload/add",
        {},
        "file",
        "audio",
        function(data) {
          let imgPath = data.data;
          console.log(data);

          let msg = chat.messageConvert({
            cvaId: _self.toUser.cvaId,
            from: chat.my().userId,
            fromUser: {
              name: chat.my().userName
            },
            type: {
              value: "audio"
            },
            to: _self.toUser.userId,
            content: imgPath,
            timestamp: Math.round(new Date().getTime() / 1000).toString()
          });

          chat.sendMessage(
            imgPath,
            _self.toUser.userId,
            "audio",
            "none",
            _self.toUser.cvaId
          );
          _self.addMessage(msg, false);
        },
        function(e) {
          console.log(e);
        }
      );

      EasyUpload.upload();
    },
    setUserInfo(toUser, name, res) {
      //动态给聊天窗口添加height
      //  console.log(toUser,name,res);
      console.log(toUser);

      this.value = "";
      let msgRes = res;
      this.toUser = toUser;
      this.transferValue = name;
      this.ifChatBox = true;
      if (toUser.online) {
        this.Transfer = true;
      } else {
        this.Transfer = false;
      }
      if (this.historyLoaded[toUser.userId]) {
        this.autoScroll();
      } else {
        this.historyLoaded[toUser.userId] = true;
        if (this.userMessages[toUser.userId]) {
          this.loadHistory(msgRes);
        } else {
          this.loadHistory(msgRes);
        }
      }
      this.myLogo = chat.my().userLogo;
    },

    sendMessage(keybord) {
      this.recodeListStatus = false;
      if (this.value) {
        if (this.hasIsthere()) {
          let msg = chat.messageConvert({
            cvaId: this.toUser.cvaId,
            from: chat.my().userId,
            fromUser: {
              name: chat.my().userName
            },
            type: {
              value: "txt" || "image"
            },
            to: this.toUser.userId,
            content: this.value,
            timestamp: Math.round(new Date().getTime() / 1000).toString()
          });

          chat.sendMessage(
            this.value,
            this.toUser.userId,
            "txt" || "image",
            "none",
            this.toUser.cvaId
          );
          this.addMessage(msg, false);
          this.value = "";
        }
      } else {
        this.$message({
          message: "内容不能为空",
          type: "warning"
        });
      }

      // this.clearUEContent();
    },

    //从智能回复中发送消息到消息列队
    rendReply(IntellGentContent){
        console.log(IntellGentContent);
        let InteContent = IntellGentContent;
         let msg = chat.messageConvert({
            cvaId: this.toUser.cvaId,
            from: chat.my().userId,
            fromUser: {
              name: chat.my().userName
            },
            type: {
              value: "txt" || "image"
            },
            to: this.toUser.userId,
            content: InteContent,
            timestamp: Math.round(new Date().getTime() / 1000).toString()
          });

          chat.sendMessage(
            InteContent,
            this.toUser.userId,
            "txt" || "image",
            "none",
            this.toUser.cvaId
          );
          this.addMessage(msg, false);
          this.value = "";
    },
    //判断聊天窗口中发送的消息和接收的消息放的位置

    addMessage(msg, unshift) {
      if (msg.from === chat.my().userId || msg.to === chat.my().userId) {
        msg.mine = msg.from === chat.my().userId;
        if (!this.userMessages[msg.mine ? msg.to : msg.from]) {
          this.userMessages[msg.mine ? msg.to : msg.from] = [];
        }
        if (unshift) {
          this.userMessages[msg.mine ? msg.to : msg.from].unshift(msg);
        } else {
          this.userMessages[msg.mine ? msg.to : msg.from].push(msg);
        }
        //处理locationMap
        if (msg.type) {
          if (msg.type.value === "location") {
            let location = JSON.parse(msg.content);
            this.lng = location.lng; //location.lng;
            this.lat = location.lat; //location.lat;
            (this.locationURL =
              "https://ditu.amap.com/regeo?lng=" +
              this.lng +
              "&lat=" +
              this.lat +
              "&src=uriapi"),
              (this.imgUrl =
                "http://restapi.amap.com/v3/staticmap?location=" +
                this.lng +
                "," +
                this.lat +
                "&zoom=13&size=500*300&markers=mid,,我:" +
                this.lng +
                "," +
                this.lat +
                "&key=6912dce4d721f10e97753912cdb9e885");
            console.log(this.locationURL, this.imgUrl);
          }
        }

        //我也不想这么做开始
        if (this.ifChatBox) {
          this.closeWindow();
          this.ifWindow();
        }
        //我也不想这么做结束
        this.autoScroll();
      }
    },
    //关闭聊天窗口
    closeWindow() {
      this.ifChatBox = false;
    },
    ifWindow() {
      this.ifChatBox = true;
    },
    autoScroll() {
      setTimeout(() => {
        let el = this.$refs.mainBox;
        el.scrollTop = el.scrollHeight - el.clientHeight;
      }, 20);
    },
    loadHistory(res) {
      let loadingInstance = Loading.service({ fullscreen: false });
      // loadingInstance.close();
      let that = this;
      if (res.status) {
        loadingInstance.close();
        if (!that.userMessages[that.toUser.userId]) {
          that.userMessages[that.toUser.userId] = [];
        }

        for (let idx in res.data) {
          let item = chat.messageConvert(res.data[idx]);
          that.addMessage(item, true);
        }
      }
    },
    autoJump() {
      let _self = this;
      setTimeout(() => {
        $("#mainBOX").on("click", ".text .question", e => {
          console.log(e);
          _self.addMessage({
            id: chat.guid(),
            from: this.toUser.userId,
            fromUser: {
              name: this.toUser.userName
            },
            type: {
              value: "txt"
            },
            to: this.toUser.userId,
            content: e.target.dataset.question,
            timestamp: Math.round(new Date().getTime() / 1000).toString()
          });
          _self.addMessage({
            id: chat.guid(),
            from: this.toUser.userId,
            fromUser: {
              name: this.toUser.userName
            },
            type: {
              value: "txt"
            },
            to: this.toUser.userId,
            content: e.target.dataset.answer,
            timestamp: Math.round(new Date().getTime() / 1000).toString()
          });
        });
      }, 20);
    },
    selectEmoji(code) {
      if (this.transferValue !== "history") {
        this.ifEmoji = false;
        this.value += code;
      } else {
        return false;
      }
    },

    //自动关闭当前用户聊天窗口
    getCloseMan() {
      contentQ.$on("showChatBox", showChatBox => {
        this.ifChatBox = showChatBox;
      });
    }
  },

  mounted() {
    let winHeight = $(window).height();
    let height = winHeight - 340;
    $(".mainBOX").css("height", height);
    $(".inputBox").css("height", "197px");

    $(window).resize(() => {
      winHeight = $(window).height();
      height = winHeight - 340;
      $(".mainBOX").css("height", height);
      $(".inputBox").css("height", "197px");
    });

    this.autoJump();
    let that = this;
    chat.addMessageListener(function(event) {
      let data = JSON.parse(event.data);
      if (
        data.type.value === "chat" ||
        data.type.value === "txt" ||
        data.type.value === "image" ||
        data.type.value === "video" ||
        data.type.value === "audio"
      ) {
        that.addMessage(chat.messageConvert(data));
      }
    });
    contentQ.$on("content", content => {
      this.value = content;
    });

    contentQ.$on("IntellGentContent", data => {
      
      if(data !== ''){
          this.value = "";
          this.rendReply(data);
      }
      
    });
    this.handleKeyword();

    contentQ.$on("textareaContent", textareaContent => {
      this.value = textareaContent;
    });

    this.getCloseMan();
  },

  components: {
    vueEmoji,
    transfer,
    createWork,
    imagePreviewer
  }
};
</script>


<style lang='scss'>
@media screen and (max-width: 1024px) {
  .titleBOX .title p {
    display: none;
  }
}

body .inputBox .el-textarea__inner {
  border: none;
}

.inputBoxBg {
  background: #f5f7fa;
}

.el-dialog__body {
  padding: 0.3rem 1.3rem;
}

.el-main {
  overflow-x: hidden;
}

a {
  text-decoration: none;
}

ul {
  padding: 0;
  margin: 0;
}

p {
  margin: 0;
}

ul li {
  list-style-type: none;
}

.titleBOX {
  display: flex;
  background: #f5f8fb;
}

.bgDisable {
  width: 100%;
  height: 35px;
  position: absolute;
  top: 0;
  z-index: 200;
}

/* .contentBox {
        display: none;
    } */

.titleBOX .title {
  display: flex;
  /* height: 4rem; */
  width: 64rem;
  position: relative;
  padding: 0.5rem 1rem;
}

.titleBOX .title > img {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
}

.titleBOX .title p {
  line-height: 2rem;
  height: initial;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.titleBOX .title .close {
  width: 1rem;
  height: 1rem;
  position: absolute;
  right: 0.7rem;
  top: 0.8rem;
}

#mainBOX {
  box-sizing: content-box;
}

.mainBOX {
  width: 100%;
  border-bottom: 1px solid #e6e7ee;
  padding-bottom: 1rem;
  overflow-x: hidden;
  overflow-y: auto;
}
.mainBOX::-webkit-scrollbar {
  width: 2px;
  display: none;
}

.mainBOX::-webkit-scrollbar-track-piece {
  background-color: #fff;
}

/* 滚动条的内层滑轨背景颜色 */

.mainBOX::-webkit-scrollbar-track {
  background-color: #fff;
}

/* 滚动条的外层滑轨背景颜色 */

.mainBOX::-webkit-scrollbar-thumb {
  background-color: #d4d8e2;
}

/* 滚动条的内层滑块颜色 */

.mainBOX::-webkit-scrollbar-button {
  background-color: #fff;
  display: none;
}

/* 滑轨两头的监听按钮颜色 */

.mine {
  text-align: right;
  padding-left: 0;
  padding-right: 60px;
  height: 9rem;
}

.user {
  left: auto;
  right: 3px;
  height: 2rem;
  line-height: 3rem;
  position: relative;
}

.mind {
  text-align: right;
}

.mind .user {
  text-align: right;
  padding-right: 1.2rem;
}

.your .user {
  padding-left: 1.2rem;
}

.mind > p,
.your > p {
  line-height: 1rem;
  padding: 0.15rem;
  color: #ced0d0;
  margin: 1rem auto;
  width: 10rem;
  border-radius: 4px;
  top: 1rem;
  font-size: 12px;
  letter-spacing: 0.05rem;
  text-align: center;
}

.inputBox {
  position: relative;
}

.inputBox .auxiliary {
  position: absolute;
  top: -14rem;
  width: 49%;
  height: 13rem;
  left: 1rem;
  background: #fff;
  border: 1px solid #f7f7f7;
  box-shadow: 0 0 12px 0 #efefef;
  overflow-y: auto;
}

.inputBox .auxiliary li {
  padding: 0.5rem;
  color: #737373;
  border-bottom: 1px solid #f6f8fb;
  font-size: 14px;
}

.text {
  margin: 0 0 0 3rem;
  display: inline-block;
  padding: 0 0.5rem;
  /* width: 30%; */
  background: #f3f4f5;
  font-size: 12px;
  line-height: 1.7rem;
  border-radius: 3px;
  max-width: 52%;
  word-break: break-all;
}

.text audio {
  width: 16rem;
  margin: 0;
}

.text img {
  vertical-align: middle;
  margin-left: 0.2rem;
  width: 9rem;
  padding: 0.5rem 0.5rem 0.5rem 0;
}

.text a img {
  margin: 0;
  padding: 0;
}

.text video {
  width: 18rem;
  padding: 0.5rem;
  vertical-align: middle;
}

.text a {
  text-decoration: underline;
  color: #62bada;
  cursor: pointer;
  margin: 0.2rem 0;
  display: inline-block;
}

.emoji .emoji-controller .active {
  background: none;
}

.mind .text {
  color: #fff;
}

.mind .text p {
  margin: 0;
  background: none;
  word-break: break-all;
  color: #fff;
  text-align: left;
}

.user img {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 100%;
}

.user cite {
  left: auto;
  right: 60px;
  text-align: right;
  position: absolute;
  top: 0;
  width: 500px;
  line-height: 24px;
  font-size: 12px;
  white-space: nowrap;
  color: #999;
  font-style: normal;
}

.text p img {
  width: 1.5rem;
}

.user cite i {
  margin-right: 1rem;
}

.your cite {
  left: 4rem;
  right: auto;
}

.your cite span:first-child {
  float: right;
  margin: 0 19rem 0 0rem;
}

.your cite span:last-child {
  float: left;
  margin: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 10rem;
  text-align: left;
  overflow: hidden;
}

.your .text {
  margin: 0 0 0 3.8rem;
}

#mainBOX li {
  margin: 2rem 0;
}

.editor-container {
  position: relative;
  display: flex;
  flex-wrap: wrap;
}

.editor-container .emoji-box {
  position: absolute;
  top: -15rem;
  left: 1.5rem;
  background: #fff;
  box-shadow: 0px 0px 8px 0 #dfe3e6;
}

.toolbar {
  width: 100%;
}

.toolbar .icon-face {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  margin: 0 0.5rem;
  background: url("../../../static/emoji.png") center center no-repeat;
  background-size: 1.4rem;
}

.toolbar .icon-photo {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  margin: 0 0.5rem;
  background: url("../../../static/LC.png") center center no-repeat;
  background-size: 1.2rem;
  position: relative;
}

.toolbar input {
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
  width: 30px;
  height: 30px;
  cursor: pointer;
}

.toolbar .icon-video {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  margin: 0 0.5rem;
  background: url("../../../static/video.png") center center no-repeat;
  background-size: 1.4rem;
  position: relative;
}

.toolbar .icon-audio {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  margin: 0 0.5rem;
  background: url("../../../static/uE700-audio.png") center center no-repeat;
  background-size: 1.4rem;
  position: relative;
}

body .el-textarea__inner {
  border: none;
  max-height: 115px;
}

.your .text {
  background: #f3f4f5;
  color: #333;
}

.mind cite span:last-child {
  margin-left: 1rem;
}

.mind .text {
  margin: 0 3.8rem 0 0;
  background: #62bad9;
}

.mind cite {
  right: 3.5rem;
}

.btnBOX {
  text-align: right;
  padding-right: 2rem;
}

.btnBOX .pulldown {
  font-size: 0.7rem;
  color: #aaa;
  letter-spacing: 0.02rem;
}

.tool {
  // width: 24rem;
  display: flex;
  padding: 0.5rem 0 0.5rem 0.4rem;
  border-left: 1px solid #e8e9ea;
}

.tool div {
  width: 6rem;
  display: flex;
  cursor: pointer;
}

// .tool div:nth-child(3) {
//     width: 6.5rem;
// }

.tool div i {
  display: block;
  width: 2rem;
  height: 2rem;
}

.tool .startFirst {
  width: 5rem;
}

.tool .startFirst i {
  background: url("../../assets/star.png") center center no-repeat;
  background-size: 1.4rem;
}

.tool .startSecoud i {
  background: url("../../assets/star2.png") center center no-repeat;
  background-size: 1.4rem;
}

.tool .startSecoud span,
.tool .pullBlackSecoud span {
  color: #62bad9;
}

.tool .pullBlackSecoud i {
  background: url("../../assets/userMinus2.png") center center no-repeat;
  background-size: 1.3rem;
}

.tool .pullBlackFirst i {
  background: url("../../assets/userMinus.png") center center no-repeat;
  background-size: 1.3rem;
}

.tool .pullBlackFirst {
  width: 5rem;
}

.tool .Establish i {
  background: url("../../assets/file-1.png") center center no-repeat;
  background-size: 1.3rem;
}

.tool .Transfer i {
  background: url("../../assets/arrow-right.png") center center no-repeat;
  background-size: 1.5rem;
}

.tool .Establish span,
.tool .Transfer span {
  color: #62bad9;
}

.tool div span {
  line-height: 2rem;
  font-size: 0.89rem;
  color: #bfbcbc;
}
</style>
